<template>
  <div id="app">
    <div class="submit" :style="'height:'+fullHeight+'px;'">
      <div class="top">
        <span class="iconfont icon-zuo" @click="back"></span>
        <span>支付完成</span>
      </div>
      <div class="main">
        <span class="iconfont icon-xuanze"></span>
        <span>订单支付成功</span>
      </div>
      <div class="list">
        <div class="item">
          <span>应付金额</span>
          <span>￥{{price}}</span>
        </div>
        <div class="item">
          <span>消耗积分</span>
          <span>{{integral}}积分</span>
        </div>
      </div>
      <button class="btn" @click="toHome">再去逛逛</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Success",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      data: [],
      price:localStorage.getItem('price'),
      integral:localStorage.getItem('integral')
    };
  },
  methods: {
    getHeight() {
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          this.fullHeight = window.fullHeight;
        })();
      };
    },
    getData() {},
    back() {
      this.$router.go(-1);
    },
    toHome() {
     this.$router.push({
          path: "/"
        });
    }
  },
  watch: {
    fullHeight(val) {
      if (this.timer) {
        this.fullHeight = val;
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
        }, 400);
      }
    }
  },
  mounted: function() {
    this.getHeight();
  }
};
</script>
<style src="../../assets/font/iconfont.css"></style>
<style lang="less">
@baseSize: 20;
@wh1: #fff;
@gray1: #f5f5f5;
@gray2: #f8f8f8;
@gray3: #d1d1d1;
@gray4: #e2e2e2;
html {
  font-size: @baseSize*1px;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  outline: none;
}
.ellipsis() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.submit {
  background: @gray1;
  .top {
    .px2rem(height, 76);
    .px2rem(line-height, 76);
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid @gray2;
    span:first-child {
      width: 39%;
      .px2rem(margin-left, 22);
      .px2rem(font-size, 36);
    }
    span:last-child {
      .px2rem(font-size, 31);
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    .px2rem(height, 483);
    border-bottom: 1px solid @gray4;
    background: #fff;
    span:first-child {
      .px2rem(margin-top, 70);
      .px2rem(margin-bottom, 28);
      .px2rem(font-size, 164);
      color: #e94716;
    }
    span:nth-child(2) {
      .px2rem(font-size, 40);
      .px2rem(height, 88);
      .px2rem(line-height, 88);
    }
    span:nth-child(3) {
      .px2rem(font-size, 22);
      .px2rem(height, 46);
      .px2rem(line-height, 46);
    }
  }
  .list {
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      .px2rem(height, 90);
      .px2rem(line-height, 90);
      background: #fff;
      border-bottom: 1px solid @gray4;
      span:first-child {
        width: 50%;
        .px2rem(margin-left, 20);
        .px2rem(font-size, 32);
      }
      span:last-child {
        width: 44%;
        display: flex;
        justify-content: flex-end;
        .px2rem(font-size, 26);
      }
    }
  }
  .btn {
    width: 100%;
    .px2rem(margin-top, 23);
    .px2rem(height, 100);
    background: #e94716;
    border: none;
    outline: none;
  }
}
</style>
